<!-- 从业者端-在线学习-模拟考试错题集-->
<template>
  <view class="container">
    <!-- 错题列表 -->
    <view class="wrong-question-list">
			<u-empty text="暂无收藏数据" mode="list" v-if="wrongQuestions.length == 0"></u-empty>
      <view 
			  v-else
        class="question-item" 
        v-for="(question, index) in wrongQuestions" 
        :key="index"
      >
			 <view class="question-typeview">
			  	<view class="question-type">{{question.btktm_type == 0 ? '单选题' : question.btktm_type == 1 ? '多选题' : '判断题' }}</view>
			 </view>
        
        <view class="question-content">{{ question.btktm_name }}</view>
        
        <view class="correct-answer">
					<!-- 答案要转为字符串回来 -->
					<view class="">
						<text>选择答案：{{ arrayToString(question.cyctkd_answer) }}</text>
					</view>
					<view class="">
						<text>正确答案：{{ zqarrayToString(question.tminfo.answers) }}</text>
					</view>
          
					
        </view>
        
        <view class="answer-analysis">
          <text class="analysis-title">答案解析：</text>
          <text class="analysis-content">{{ question.tminfo.baseinfo.btktm_answerdesc }}</text>
        </view>
        
        <!-- 分割线 -->
        <u-line 
          v-if="index < wrongQuestions.length - 1" 
          color="#eee" 
          margin="30rpx 0"
        ></u-line>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wrongQuestions: [
        {
          id: 1,
          type: '单选题',
          content: '题干内容题干内容题干内容题干内容题干内容题干内容题干内容题干内容题干内容',
          correctOption: 'A',
          correctText: '选项内容',
          analysis: '题干内容题干内容题干内容题干内容题干'
        },
        {
          id: 2,
          type: '单选题',
          content: '题干内容题干内容题干内容题干内容题干内容题干内容题干内容题干内容题干内容',
          correctOption: 'A',
          correctText: '选项内容',
          analysis: '题干内容题干内容题干内容题干内容题干'
        },
        {
          id: 3,
          type: '单选题',
          content: '题干内容题干内容题干内容题干内容题干内容题干内容题干内容题干内容题干',
          correctOption: 'B',
          correctText: '选项内容',
          analysis: '这里是详细的答案解析内容'
        }
      ],
			datatype: 0,
    }
  },
	onLoad(options) {
		this.datatype = options.datatype	
	},
	onShow() {
		this.selectStudyList()
	},
	methods:{
		selectStudyList() {
			this.$u.api.querystudylist({
				"usercode": uni.getStorageSync('usercode'), ///#从业者的用户code
				"datatype": this.datatype   ///#收藏列表，1错题列表，2练习记录列表
			}).then(res => {
				console.log('list:', res)
				this.wrongQuestions = []
				this.wrongQuestions = res.data.base_info
			})
		},
		// 将数组转为字符串
		arrayToString(arraydata) {
			console.log('array:', Array.isArray(arraydata))
			if(Array.isArray(arraydata)) {
				return  arraydata.join('、')
			} else {
				return arraydata
			}			
		},
		zqarrayToString(arraydata) {
			console.log('array-1:', arraydata)
			let tmparraydata = []
			if(Array.isArray(arraydata)) {
				for(let i=0; i<arraydata.length; i++) {
					let tmpindex = arraydata[i].btktma_index+1
					tmparraydata.push(String.fromCharCode(65 + tmpindex))
				}
				console.log('array-2:', tmparraydata)
				return tmparraydata.join('、')
			}

			
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #F1F7F7;
  min-height: 94.8vh;
}

// .header {
//   margin-bottom: 30rpx;
  
//   .title {
//     font-size: 36rpx;
//     font-weight: bold;
//     color: #333;
//     display: block;
//     margin-bottom: 10rpx;
//   }
  
//   .subtitle {
//     font-size: 28rpx;
//     color: #666;
//   }
// }

.wrong-question-list {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.question-item {
  padding: 15rpx 0;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
  
  .question-typeview {
		background-color: #03B8CD;
		color: #ffffff;
		padding-left: 10rpx;
	}
	.question-type {
    font-size: 26rpx;
    color: #ffffff;
    margin-bottom: 20rpx;
  }
  
  .question-content {
    font-size: 30rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 25rpx;
  }
  
  .correct-answer {
    font-size: 26rpx;
    color: #03B8CD;
    font-weight: bold;
    margin-bottom: 20rpx;
    padding-left: 20rpx;
    border-left: 4rpx solid #03B8CD;
  }
  
  .answer-analysis {
    background-color: #F1F7F7;
    border-radius: 8rpx;
    padding: 20rpx;
    
    .analysis-title {
      font-size: 26rpx;
      color: #03B8CD;
      font-weight: bold;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .analysis-content {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}
</style>